<script setup>
import { useUserStore } from '@/stores/userStore'
import {upload} from '@/apis/square'
import { ref, watch } from 'vue'
// import { userUpdateInfoService } from '@/api/user'
import { getUserInfoService,updateUserInfoService } from "@/apis/user";
const userStore = useUserStore()
const UserInfo=ref({
  avatar:'',
  nickname:'爱喝茶的某某',
  phoneNumber:'13812345678'
})
const city=ref('北京')
const job=ref('国家机关、党群组织、企业、事业单位负责')
const getUserInfo=async()=>{
    const res=await getUserInfoService()
    console.log("用户详情",res);
    UserInfo.value=res.data.data
}
getUserInfo()
const updateUserInfo=async()=>{
  await updateUserInfoService(UserInfo.value)
  const res=await getUserInfoService()
  //userStore.Info=res.data.data
  userStore.changeInfo(res.data.data)
}

const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
const cities = [
  {
    value: '北京',
    label: '北京',
  },
  {
    value: '天津',
    label: '天津',
  },
  {
    value: '河北省',
    label: '河北省',
  },
  {
    value: '山西省',
    label: '山西省',
  },
  {
    value: '内蒙古自治区',
    label: '内蒙古自治区',
  },
  {
    value: '辽宁省',
    label: '辽宁省',
  },
  {
    value: '吉林省',
    label: '吉林省',
  },
  {
    value: '黑龙江省',
    label: '黑龙江省',
  },
  {
    value: '上海',
    label: '上海',
  },
  {
    value: '江苏省',
    label: '江苏省',
  },
  {
    value: '浙江省',
    label: '浙江省',
  },
  {
    value: '安徽省',
    label: '安徽省',
  },
  {
    value: '福建省',
    label: '福建省',
  },
  {
    value: '江西省',
    label: '江西省',
  },
  {
    value: '山东省',
    label: '山东省',
  },
  {
    value: '河南省',
    label: '河南省',
  },
  {
    value: '湖北省',
    label: '湖北省',
  },
  {
    value: '湖南省',
    label: '湖南省',
  },
  {
    value: '广东省',
    label: '广东省',
  },
  {
    value: '广西壮族自治区',
    label: '广西壮族自治区',
  },
  {
    value: '海南省',
    label: '海南省',
  },
  {
    value: '重庆',
    label: '重庆',
  },
  {
    value: '四川省',
    label: '四川省',
  },
  {
    value: '贵州省',
    label: '贵州省',
  },
  {
    value: '云南省',
    label: '云南省',
  },
  {
    value: '西藏自治区',
    label: '西藏自治区',
  },
  {
    value: '陕西省',
    label: '陕西省',
  },
  {
    value: '甘肃省',
    label: '甘肃省',
  },
  {
    value: '青海省',
    label: '青海省',
  },
  {
    value: '宁夏回族自治区',
    label: '宁夏回族自治区',
  },
  {
    value: '新疆维吾尔自治区',
    label: '新疆维吾尔自治区',
  },
  {
    value: '台湾省',
    label: '台湾省',
  },
  {
    value: '香港特别行政区',
    label: '香港特别行政区',
  },
  {
    value: '澳门特别行政区',
    label: '澳门特别行政区',
  }
]
const options = [
  {
    value: '国家机关、党群组织、企业、事业单位负责',
    label: '国家机关、党群组织、企业、事业单位负责',
  },
  {
    value: '专业技术人员',
    label: '专业技术人员',
  },
  {
    value: '办事人员和有关人员',
    label: '办事人员和有关人员',
  },
  {
    value: '商业、服务业人员',
    label: '商业、服务业人员',
  },
  {
    value: '农、林、牧、渔、水利业生产人员',
    label: '农、林、牧、渔、水利业生产人员',
  },
  {
    value: '生产、运输设备操作人员及有关人员',
    label: '生产、运输设备操作人员及有关人员',
  },
  {
    value: '军人',
    label: '军人',
  },
  {
    value: '不便分类的其他从业人员',
    label: '不便分类的其他从业人员',
  }
]
watch(UserInfo, (newValue, oldValue) => {
  console.log(UserInfo.value);
})
const handleChange = async(file) => {
    console.log('上传的图片',file.raw);
    const formData = new FormData();
    formData.append('file',file.raw)
    const res = await upload(formData)

    const url = res.data.data
    UserInfo.value.avatar=url
    console.log("--------",UserInfo.value);
  // UserInfo.value.avatar=URL.createObjectURL(file.raw)
  // console.log("--------",UserInfo.value);
}




</script>

<template>
  <el-upload
    ref="UserInfo.avatar"
    :auto-upload="false"
    class="avatar-uploader"
    :show-file-list="false"
    :on-change="handleChange"
    >
    <!-- <img v-if="UserInfo.avatar" :src="UserInfo.avatar" class="avatar" /> -->
    <!-- <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> -->
    <el-avatar class="header" size="large" :src="UserInfo.avatar"></el-avatar>
    <br>
    
  </el-upload>
  
<el-form class="footer" :model="UserInfo" label-width="auto" style="max-width: 500px">
  <el-upload>
    <el-form-item>
      <p link class="avatar"  style="margin-left: 160px;color: rgb(169, 167, 165);">提示：点击头像即可修改</p>
    </el-form-item>
  </el-upload>
  <el-form-item label="昵称:" class="item1" prop="nickname">
    <el-input v-model="UserInfo.nickname"></el-input>
  </el-form-item>
  
  <el-form-item label="联系方式:" class="item4" prop="phoneNumber">
    <el-input v-model="UserInfo.phoneNumber"></el-input>
  </el-form-item>
  <el-form-item label="城市:" class="item3">
    <el-select v-model="city" placeholder="请选择所在城市">
      <el-option
        v-for="item in cities"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        >
      <span style="float: left">{{ item.label }}</span>
    </el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="职业:" class="item4">
    <el-select v-model="job" placeholder="请选择职业">
      <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      ></el-option>
    </el-select>
  </el-form-item>
  <el-form-item class="footer-buttom">
    <el-button type="primary" style="width: 200px" @click="updateUserInfo">保存</el-button>
  </el-form-item>
</el-form>
</template>
<style lang="scss" scoped>
.header {
  margin-left: 470px;
}
.avatar {
  text-align: center;
  color: $xtxColor;
}
.footer {
  .item1 {
    margin-bottom: 30px;
  }
  .item2 {
    margin-bottom: 30px;
  }
  .item3 {
    margin-bottom: 30px;
  }
  .item4 {
    margin-bottom: 30px;
  }
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left:210px ;
  .footer-buttom {
    padding: 30px;
    margin-left: 80px;
    justify-content: center;
    // color: rgb(169, 167, 165);
  }
}
</style>